@material/ripple

What is @material/ripple?

@material/ripple is a package from the Material Design Components (MDC) library that provides a ripple effect for interactive elements. This effect is commonly used in Material Design to indicate the point of touch or click, giving users visual feedback.

What are @material/ripple's main functionalities?

Basic Ripple

This code initializes a basic ripple effect on a button element with the class 'mdc-button'.

const MDCRipple = require('@material/ripple').MDCRipple;
const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));

Unbounded Ripple

This code initializes an unbounded ripple effect, which means the ripple effect will extend beyond the bounds of the element.

const MDCRipple = require('@material/ripple').MDCRipple;
const unboundedRipple = new MDCRipple(document.querySelector('.mdc-ripple-surface'));
unboundedRipple.unbounded = true;

Ripple with Custom Color

This code initializes a ripple effect with a custom color on a button element. The ripple color is set to a semi-transparent red.

const MDCRipple = require('@material/ripple').MDCRipple;
const customRipple = new MDCRipple(document.querySelector('.mdc-button'));
customRipple.root.style.setProperty('--mdc-ripple-color', 'rgba(255, 0, 0, 0.3)');

Other packages similar to @material/ripple

react-ripple

react-ripple is a lightweight React component that provides a ripple effect similar to @material/ripple. It is easy to use and integrates well with React applications. However, it may not offer as many customization options as @material/ripple.

vue-ripple-directive

vue-ripple-directive is a Vue.js directive that adds a ripple effect to elements. It is specifically designed for Vue.js applications and offers a simple way to add ripple effects. Compared to @material/ripple, it is more tailored to Vue.js but may lack some advanced features.

ripple-js

ripple-js is a standalone JavaScript library that provides a ripple effect for any web application. It is framework-agnostic and can be used with plain JavaScript, React, Vue, or any other framework. It offers flexibility but may require more manual setup compared to @material/ripple.

README

Ripple

MDC Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material "ink ripple" interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.

MDC Ripple also works without JavaScript, where it gracefully degrades to a simpler CSS-Only implementation.

Design & API Documentation

• Material Design guidelines: States
• Demo

Installation

npm install @material/ripple

Usage

A ripple can be applied to a variety of elements to represent interactive surfaces. Several MDC Web components, such as Button, FAB, Checkbox and Radio, also use ripples.

A ripple can be added to an element through either a JavaScript or CSS-only implementation. When a ripple is initialized on an element using JS, it dynamically adds a mdc-ripple-upgraded class to that element. If ripple JS is not initialized but Sass mixins are included on the element, the ripple uses a simpler CSS-only implementation which relies on the :hover, :focus, and :active pseudo-classes.

CSS Classes

CSS Class	Description
mdc-ripple-surface	Adds a ripple to the element
mdc-ripple-surface--primary	Sets the ripple color to the theme primary color
mdc-ripple-surface--accent	Sets the ripple color to the theme secondary color

Sass APIs

In order to fully style the ripple effect for different states (hover/focus/pressed), the following mixins must be included:

• surface, for base styles
• Either radius-bounded or radius-unbounded, to appropriately size the ripple on the surface
• Either the basic or advanced states mixins, as explained below

Using basic states mixins

@use "@material/ripple";

.my-surface {
  @include ripple.surface;
  @include ripple.radius-bounded;
  @include ripple.states;
}

Using advanced states mixins

.my-surface {
  @include ripple.surface;
  @include ripple.radius-bounded;
  @include ripple.states-base-color(black);
  @include ripple.states-opacities((hover: .1, focus: .3, press: .4));
}

These APIs use pseudo-elements for the ripple effect: ::before for the background, and ::after for the foreground.

Ripple Mixins

Mixin	Description
surface	Mandatory. Adds base styles for a ripple surface
radius-bounded($radius)	Adds styles for the radius of the ripple effect, for bounded ripple surfaces
radius-unbounded($radius)	Adds styles for the radius of the ripple effect, for unbounded ripple surfaces

NOTE: It is mandatory to include either radius-bounded or radius-unbounded. In both cases, $radius is optional and defaults to 100%.

Basic States Mixins

Mixin	Description
states($color, $has-nested-focusable-element)	Mandatory. Adds state and ripple styles in the given color
states-activated($color, $has-nested-focusable-element)	Optional. Adds state and ripple styles for activated states in the given color
states-selected($color, $has-nested-focusable-element)	Optional. Adds state and ripple styles for selected states in the given color

NOTE: Each of the mixins above adds ripple styles using the indicated color, deciding opacity values based on whether the passed color is light or dark.

NOTE: The states-activated and states-selected mixins add the appropriate state styles to the root element containing &--activated or &--selected modifier classes respectively.

NOTE: $has-nested-focusable-element defaults to false but should be set to true if the component contains a focusable element (e.g. an input) inside the root element.

Advanced States Mixins

When using the advanced states mixins instead of the basic states mixins, every one of the mixins below should be included at least once.

These mixins can also be used to emit activated or selected styles, by applying them within a selector for &--activated or &--selected modifier classes.

Mixin	Description
states-base-color($color)	Mandatory. Sets up base state styles using the provided color
states-opacities($opacity-map, $has-nested-focusable-element)	Sets the opacity of the ripple in any of the hover, focus, or press states. The opacity-map can specify one or more of these states as keys. States not specified in the map resort to default opacity values.

NOTE: $has-nested-focusable-element defaults to false but should be set to true if the component contains a focusable element (e.g. an input) inside the root element.

DEPRECATED: The individual mixins states-hover-opacity($opacity), states-focus-opacity($opacity, $has-nested-focusable-element), and states-press-opacity($opacity) are deprecated in favor of the unified states-opacities($opacity-map, $has-nested-focusable-element) mixin above.

Sass Functions

Function	Description
states-opacity($color, $state)	Returns the appropriate default opacity to apply to the given color in the given state (hover, focus, press, selected, or activated)

MDCRipple

The MDCRipple JavaScript component allows for programmatic activation / deactivation of the ripple, for interdependent interaction between components. For example, this is used for making form field labels trigger the ripples in their corresponding input elements.

To use the MDCRipple component, first import the MDCRipple JS. Then, initialize the ripple with the correct DOM element.

const surface = document.querySelector('.my-surface');
const ripple = new MDCRipple(surface);

You can also use attachTo() as an alias if you don't care about retaining a reference to the ripple.

MDCRipple.attachTo(document.querySelector('.my-surface'));

Property	Value Type	Description
unbounded	Boolean	Whether or not the ripple is unbounded

NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.

Method Signature	Description
activate() => void	Proxies to the foundation's activate method
deactivate() => void	Proxies to the foundation's deactivate method
layout() => void	Proxies to the foundation's layout method
handleFocus() => void	Handles focus event on the ripple surface
handleBlur() => void	Handles blur event on the ripple surface

MDCRippleAdapter

Method Signature	Description
browserSupportsCssVars() => boolean	Whether or not the given browser supports CSS Variables.
isUnbounded() => boolean	Whether or not the ripple should be considered unbounded.
isSurfaceActive() => boolean	Whether or not the surface the ripple is acting upon is active
isSurfaceDisabled() => boolean	Whether or not the ripple is attached to a disabled component
addClass(className: string) => void	Adds a class to the ripple surface
removeClass(className: string) => void	Removes a class from the ripple surface
containsEventTarget(target: EventTarget) => boolean	Whether or not the ripple surface contains the given event target
registerInteractionHandler(evtType: string, handler: EventListener) => void	Registers an event handler on the ripple surface
deregisterInteractionHandler(evtType: string, handler: EventListener) => void	Unregisters an event handler on the ripple surface
registerDocumentInteractionHandler(evtType: string, handler: EventListener) => void	Registers an event handler on the documentElement
deregisterDocumentInteractionHandler(evtType: string, handler: EventListener) => void	Unregisters an event handler on the documentElement
registerResizeHandler(handler: Function) => void	Registers a handler to be called when the ripple surface (or its viewport) resizes
deregisterResizeHandler(handler: Function) => void	Unregisters a handler to be called when the ripple surface (or its viewport) resizes
updateCssVariable(varName: string, value: (string or null)) => void	Sets the CSS property varName on the ripple surface to the value specified
computeBoundingRect() => ClientRect	Returns the ClientRect for the surface
getWindowPageOffset() => {x: number, y: number}	Returns the page{X,Y}Offset values for the window object

NOTE: When implementing browserSupportsCssVars, please take the Safari 9 considerations into account. We provide a supportsCssVariables function within the util.js which we recommend using, as it handles this for you.

MDCRippleFoundation

Method Signature	Description
activate() => void	Triggers an activation of the ripple (the first stage, which happens when the ripple surface is engaged via interaction, such as a mousedown or a pointerdown event). It expands from the center.
deactivate() => void	Triggers a deactivation of the ripple (the second stage, which happens when the ripple surface is engaged via interaction, such as a mouseup or a pointerup event). It expands from the center.
layout() => void	Recomputes all dimensions and positions for the ripple element. Useful if a ripple surface's position or dimension is changed programmatically.
setUnbounded(unbounded: boolean) => void	Sets the ripple to be unbounded or not, based on the given boolean.

Tips/Tricks

Using a sentinel element for a ripple

Usually, you'll want to leverage ::before and ::after pseudo-elements when integrating the ripple into MDC Web components. If you can't use pseudo-elements, create a sentinel element inside your root element. The sentinel element covers the root element's surface.

<div class="my-component">
  <div class="mdc-ripple-surface"></div>
  <!-- your component DOM -->
</div>

Unbounded ripple

You can set a ripple to be unbounded, such as those used for MDC Checkboxes and MDC Radio Buttons, either imperatively in JS or declaratively using the DOM.

Using JS

Set the unbounded property on the MDCRipple component.

const ripple = new MDCRipple(root);
ripple.unbounded = true;

Using DOM

Add a data-mdc-ripple-is-unbounded attribute to your root element.

<div class="my-surface" data-mdc-ripple-is-unbounded>
  <p>A surface</p>
</div>

MDCRipple with custom functionality

Usually, you'll want to use MDCRipple along with the component for the actual UI element you're trying to add a ripple to. MDCRipple has a static createAdapter(instance) method that can be used to instantiate a ripple within any MDCComponent that requires custom adapter functionality.

class MyMDCComponent extends MDCComponent {
  constructor() {
    super(...arguments);
    const foundation = new MDCRippleFoundation({
      ...MDCRipple.createAdapter(this),
      isSurfaceActive: () => this.isActive_, /* Custom functionality */
    });
    this.ripple = new MDCRipple(this.root, foundation);
  }
}

Handling keyboard events for custom UI components

Different keyboard events activate different elements. For example, the space key activates buttons, while the enter key activates links.

MDCRipple uses the adapter.isSurfaceActive() method to detect whether or not a keyboard event has activated the surface the ripple is on. Our vanilla implementation of the adapter does this by checking whether the :active pseudo-class has been applied to the ripple surface. However, this approach will not work for custom components that the browser does not apply this pseudo-class to.

To make your component work properly with keyboard events, you'll have to listen for both keydown and keyup events to set some state that determines whether or not the surface is "active".

class MyComponent {
  constructor(element) {
    this.root = element;
    this.active = false;
    this.root.addEventListener('keydown', evt => {
      if (isSpace(evt)) {
        this.active = true;
      }
    });
    this.root.addEventListener('keyup', evt => {
      if (isSpace(evt)) {
        this.active = false;
      }
    });
    const foundation = new MDCRippleFoundation(
      ...MDCRipple.createAdapter(this),
      // ...
      isSurfaceActive: () => this.active
    });
    this.ripple = new MDCRipple(this.root, foundation);
  }
}

Specifying known element dimensions for asynchronous style loading

If you asynchronously load style resources, such as loading stylesheets dynamically or loading fonts, then adapter.getClientRect() may return incorrect dimensions if the ripple is initialized before the stylesheet/font has loaded. In this case, you can override the default behavior of getClientRect() to return the correct results.

For example, if you know an icon font sizes its elements to 24px width and height:

const foundation = new MDCRippleFoundation({
  // ...
  computeBoundingRect: () => {
    const {left, top} = element.getBoundingClientRect();
    const dim = 24;
    return {
      left,
      top,
      width: dim,
      height: dim,
      right: left + dim,
      bottom: top + dim
    };
  }
});
this.ripple = new MDCRipple(this.root, foundation);

The util API

External frameworks and libraries can use the following utility methods when integrating a component.

Method Signature	Description
util.supportsCssVariables(windowObj, forceRefresh = false) => Boolean	Determine whether the current browser supports CSS variables (custom properties)
util.getNormalizedEventCoords(ev, pageOffset, clientRect) => object	Determines X/Y coordinates of an event normalized for touch events and ripples

NOTE: The function util.supportsCssVariables cache its results; forceRefresh will force recomputation, but is used mainly for testing and should not be necessary in normal use.

Caveats

Caveat: Safari 9

TL;DR ripples are disabled in Safari 9 because of a bug with CSS variables.

The ripple works by updating CSS variables used by pseudo-elements. Unfortunately, in Safari 9.1, there is a bug where updating a CSS variable on an element will not trigger a style recalculation on that element's pseudo-elements (try out this codepen in Chrome, and then in Safari 9.1 to see the issue). Webkit builds which have this bug fixed (e.g. the builds used in Safari 10+) support CSS 4 Hex Notation while those without the fix don't. We feature-detect whether we are working with a WebKit build that can handle our usage of CSS variables.

Caveat: Mobile Safari

TL;DR for CSS-only ripple styles to work as intended, register a touchstart event handler on the affected element or its ancestor.

Mobile Safari does not trigger :active styles noticeably by default, as documented in the Safari Web Content Guide. This effectively suppresses the intended pressed state styles for CSS-only ripple surfaces. This behavior can be remedied by registering a touchstart event handler on the element, or on any common ancestor of the desired elements.

See this StackOverflow answer for additional information on mobile Safari's behavior.

Changelog

6.0.0 (2020-04-22)

Bug Fixes

• auto-init: Fixed issue with multiple default exports (#5464) (8ddd5c6)
• button: Fix outline & ink color according to spec guidance (#5268) (ee1a68c)
• button: Fixed parameter default value in height mixin (#5244) (b0cecf1)
• checkbox: change checkbox event type from change to click and add some logic for IE browser (#5316) (2e491de), closes #4893
• checkbox: Disabled state colors in IE11 high contrast mode (#5263) (d6a1d4b)
• checkbox: Replace unique-id with custom color hash functio… (#5404) (7be9e4a)
• checkbox: update disabled color values (#5209) (821871e)
• checkbox: Use secondary and on-secondary as default colors (b95172e), closes #5730
• chips: .d.ts file generated with syntax error (d154836)
• chips: .d.ts file generated with syntax error (#5577) (98f7faa)
• chips: Do not throw error if chip set becomes empty (#5290) (f978109)
• chips: Fix browser back nav in FF when removing chip with… (#5537) (a1a0deb)
• chips: Handle IE/Edge specific key names in keyboard navigation logic (3657f88)
• chips: Move touch target inside primary action (ad3bbf7)
• circular-progress: Add .npmignore file to ignore typescript files when publishing (#5801) (f172b0f), closes #5800
• circular-progress: fix determinate transition typo & 4 color keyframes (a301636)
• circular-progress: Fix naming in package.json and add to jsBundleFactory (86f7cad)
• circular-progress: Force LTR layout (6a40ef2)
• circular-progress: Switch mixins import to [@use](https://github.com/use) (098ae32)
• core: Fix canary release by excluding test files from default tsconfig (#5317) (c916008)
• data-table: change svg attribute name viewbox to viewBox (#5483) (#5493) (f3adce8)
• data-table: Fix pagination box height (eb28b6e)
• data-table: Fixed default feature targeting query params of sort mixins (e33c49e)
• data-table: Hover styles for sortable header cell (d580805)
• data-table: Reverse the arrow direction icon for column sorting (a7c827f)
• data-table: unable to redefine colors in class-based themi… (#5751) (4d48051)
• data-table: unable to redefine colors in class-based theming (4b45b66)
• dialog: Move aria roles from dialog root to dialog surface… (#5239) (c704b71)
• elevation: Update overlay color mixin (#5331) (b723dfa)
• fab: Add missing dep to fab package.json. (#5236) (e0f6fd9)
• fab: Add overflow: visible to make touch target visible in… (#5241) (5850080)
• fab: Adjust fab line-height (#5254) (525989b)
• fab: Adjust fab line-height to center text (#5258) (591a6ad)
• floatinglabel: Estimate hidden scroll width (#5448) (981ec9b)
• linear-progress: Temporary rollback of #5656 while updating downstream dependencies (9cf5e98)
• linear-progress: support aria attributes (#5248) (7084b40), closes #5248
• list: Ensure disabled colors apply to primary and secondary text (#5322) (878a08b)
• list: No longer emits action event when disabled item selected (f352d03), closes #5571
• menu-surface: Use margin_to_edge as a viewport margin in calculations for autopositioning. (4b04cdb)
• menusurface: open and closed events not fired when already opened or closed (9cff431)
• menusurface: synchronous quick menu does not close on button click (45a6615)
• notched-outline: Restore component test (#5449) (4269133)
• radio: update disabled color values (#5210) (491fddc)
• select: Deduplicate change events (4ad1274), closes #5570
• select: Do not fire change event on programmatic change (#5255) (ec72968)
• select: Fix notch outline width when floating (#5319) (1c494e5)
• slider: slider track not visible (#5512) (f2426d2)
• slider: two change events fired on each up (d10412c)
• slider: use secondary custom property color for slider container (#5132) (aa8e43e)
• slider: Visual bug when slider value is displayed as "-0" (3fc3ab5)
• snackbar: add explicit width for label to wrap in ie11 (#5497) (cd49033)
• snackbar: adjust mixins to meet spec (#5477) (f16f15b)
• switch: add transform transition to switch control to avoid overflow-x issues (8c11ea2)
• switch: always set track to transparent border (9a169f4)
• switch: fix strict generic checks (7f5e0c2)
• switch: handle aria-checked correctly. (#5202) (#5357) (d245a1a)
• switch: set track border to be transparent (#5323) (397905b)
• switch: use CSS custom properties for theming (d6315ef)
• testing: Revert change from #5299. (#5324) (5fb62be)
• textfield: add placeholder mixins and fix disabled colors (#5360) (0a40ced)
• textfield: add separate classes for leading/trailing icons (#5367) (70c708d)
• textfield: change root element to <label> (#5439) (d8d9502)
• textfield: clean up input padding (8639c26)
• textfield: hide filled-variant floating label at <52px (#5553) (5ff3380)
• textfield: IE11 label overlapping placeholder (781434a)
• textfield: incorrect mixin forward path (#5554) (3e782d8)
• textfield: move ripple to separate element (c541ebe)
• textfield: outlined trailing icon's position (#5496) (93e2288)
• textfield: prevent placeholder styles from collapsing with minifiers (d07c78d)
• add missing SASS dependencies (#5337) (d2ae6e1)
• textfield: remove absolute positioning from icons (1e13d1d)
• textfield: remove deprecated dense variant in favor of density (776291e), closes #4142
• textfield: use correct disabled colors for IE11 high contrast (5353985)
• Remove edge detection for CSS custom properties (#5264) (fe444ac)
• server-side rendering errors in linear progress and slider (7d0b983)

Code Refactoring

• migrate to the Sass module system (#5453) (faa9af3)
• grid-list: Deprecate component (#5499) (cf33f11)
• linear-progress: Restructure buffer DOM to allow translucent buffer (98b8434)
• linear-progress: Restructure buffer DOM to allow translucent buffer (9372e49)
• select: Fix alignment issues, upgrade anchor to interactive element (28d10a9), closes #5428
• touchtarget: Rename mdc-touch-target-component => mdc… (#5245) (afe0dd1)

Features

• button: Add disabled state color mixins (#5232) (b5eb51e)
• button: Add overflow ellipsis mixin (#5352) (47949b0)
• button: Expand outlined touch target to include side borders (ce6cb70)
• button: Setup elevation overlay (#5256) (3cbee6d)
• card: Add elevation overlay structure (#5282) (aa0eba4)
• checkbox: Add support for checkbox CSS-only indeterminate checkbox (b273afa)
• chips: Add chips styling (1db5c9f)
• chips: Add elevation overlay structure (#5279) (3e560b3)
• chips: Add focus{in|out} handlers (10af6cf)
• chips: Add keyCode support (82fa986)
• chips: Add trailing action feature targeting test (bec0659)
• chips: Announce when chips are removed (b3f70eb)
• chips: Consolidate interaction event handlers (#5251) (5729943)
• chips: Create trailing action business logic (9ebee4c)
• chips: Expose trailing action chip files (6b48781)
• chips: Restructure trailing action mixins (05f5e15)
• circular-progress: Add foundation methods to get isDeterminate and progress value (7d8f9c8)
• circular-progress: Add Sass styles and tests (bd33cb5)
• circular-progress: Add TS for foundation, adapter, component with tests (548b1d4)
• data-table: Add base styles to support pagination. (927fa90)
• data-table: Add foundation methods to support loading state. (e75deb8)
• data-table: Added styles for table in loading state (35a32aa)
• data-table: Added styles to support column sorting. (17b9699)
• data-table: Foundation changes to support column sorting (6ee0355)
• data-table: Set progress indicator styles based on table body height (c026422)
• dialog: Add elevation overlay structure (#5283) (b8bc4a2)
• dom: Add focus trap utility. (#5505) (63f357d)
• dom: Add keyboard support (5f24faa)
• dom: Create announcer utility (32c1df1)
• elevation: Add elevation overlay mixins (#5249) (b4cfdc4)
• elevation: Update elevation mixins (#5304) (ba879b6)
• fab: Add elevation overlay structure (#5278) (e89750d)
• fab: Add outline in high-contrast mode (deda86d)
• fab: Add support for increased touch target to mini FAB. (#5231) (0c4d8f3)
• floating-label: add feature targeting for styles (#5287) (b240bcc)
• form-field: Add support for space-between (e84b9c8), closes #5747
• formfield: add nowrap class/prop to MDC/MWC (c4b4bba)
• icon-button: Add disabled state color mixins (#5246) (7161170)
• iconbutton: Add icon button variant which supports toggling aria label. (f838c6e)
• line-ripple: add active/inactive states to line-ripple (b6c7f62)
• line-ripple: add feature targeting for styles (#5292) (391674a)
• linear-progress: Add foundation methods to fetch progress and determinate state. (4dc45af)
• menu: Add elevation overlay structure (#5280) (7fd17ce)
• menu: Add mixin to flatten menu top when opened-below anchor (1e17c49)
• menu-surface: Add support for flipping menu corner horizontally. (7b44824)
• notched-outline: add feature targeting for styles (#5289) (c483774)
• progress-indicator: Add common interface for progress indicators (#5564) (ea863cb)
• ripple: Reorganize ripple opacities (008c4d3)
• switch: Add elevation overlay structure (#5281) (50f110a)
• switch: Restructure DOM (#5312) (0ec1fab)
• text-field: Add disabled state color mixins (#5208) (66299b6)
• text-field: add feature targeting for styles (#5378) (e8a9936)
• text-field: Truncate floating label width w/ icons (c141801)
• textfield: add end-alignment (#5356) (847dd1a)
• textfield: add filled class variant (b70bc60)
• textfield: add forced LTR input (490fbdc)
• textfield: add prefix and suffix (6601d24), closes #1892
• Add index stylesheets to each MDC Web package (#5539) (1814866)
• Add index stylesheets to mdc-image-list and mdc-layout-gr… (#5546) (3a85313)
• Use @use syntax in material-components-web Sass file and… (#5573) (b4727e4)
• textfield: add specific label-floating class (a88c8e4)
• textfield: allow character counter to be moved outside of the textarea. (84e7ed5)
• textfield: Create float transition mixin (ca61b65)
• textfield: Limit notched outline max-width (0ab62a6)
• typography: add container baseline mixins for flexbox (69edc6e)

Reverts

• Revert "feat(switch): Add elevation overlay structure (#5281)" (#5329) (1fbf5bd), closes #5281 #5329
• "fix(checkbox): change checkbox event type from change to click and add some logic for IE browser" (ba30399)
• feat(chips): Consolidate interaction event handlers (#5251) (#5301) (5e45d77)
• fix(chips): Do not throw error if chip set becomes empty (#5300) (d10e8cd)
• fix(select): Do not fire change event on programmatic change (#5255) (#5302) (ad9dfe7)

BREAKING CHANGES

• select: HTML Markup significantly changed, see README; REMOVED adapter methods isSelectedTextFocused, getSelectedTextAttr, setSelectedTextAttr; ADDED adapter methods isSelectAnchorFocused, getSelectAnchorAttr, setSelectAnchorAttr; removed variables outlined-dense-label-position-y, icon-padding; added variables minimum-height-for-filled-label, filled-baseline-top, selected-text-height, anchor-padding-left, anchor-padding-left-with-leading-icon, anchor-padding-right.

• text-field: Redundant mixins mdc-text-field-textarea-fill-color, mdc-text-field-textarea-stroke-color, mdc-text-field-fullwidth-bottom-line-color removed. Instead, use mdc-text-field-fill-color, mdc-text-field-outline-color, and mdc-text-field-bottom-line-color respectively to achieve the same effect.

• textfield: mdc-text-field--dense and associated mixins/variables have been removed. Use the density() mixin instead.

• textfield: removed the following variables: $input-padding, $input-padding-top, $input-padding-bottom, $outlined-input-padding-top, $outlined-input-padding-bottom, $input-border-bottom

• linear-progress: DOM for linear progress buffer changed. MDCLinearProgressAdapter method getBuffer, getPrimaryBar, setStyle removed. MDCLinearProgressAdapter method setBufferBarStyle, setPrimaryBarStyle added.

• linear-progress: DOM for linear progress buffer changed. MDCLinearProgressAdapter method getBuffer, getPrimaryBar, setStyle removed. MDCLinearProgressAdapter method setBufferBarStyle, setPrimaryBarStyle added.

• typography: typography.baseline-top() and typography.baseline-bottom() are now private. Use typography.baseline() for containers and typography.text-baseline() for text with $top and $bottom params.

• chips: The touch target and text now appear inside the primary action element. Please see the readme for markup changes.

• textfield: filled text fields must include a <div class="mdc-text-field__ripple"></div>

• textfield: Filled textfields will no longer show a floating label at certain densities. This can be overridden by setting $mdc-text-field-minimum-height-for-filled-label: 40px

• chips: Both MDCChipAdapter and MDCChipSetAdapter have new methods. MDCChipSetFoundation event handlers now accept the corresponding chip event detail interface as the sole argument. The root property has been removed from the MDCChipRemovalEventDetail interface.

• line-ripple: mdc-line-ripple-color() mixin has been renamed to mdc-line-ripple-active-color()

• textfield: Default textfields must now specify mdc-text-field--filled. Disabled outlined textfields no longer have a shaded background. Height mixin no longer specifies a baseline override, use typography's baseline-top mixin.

• Four variables and a mixin in mdc-textfield were renamed to use a mdc-text-field- prefix when depended on via @import (formerly mdc-required-text-field-label-asterisk_, now required-label-asterisk_).

• textfield: icons must use .mdc-text-field__icon--leading or .mdc-text-field__icon--trailing classes. mdc-text-field-icon-color() mixin has been split into mdc-text-field-leading-icon-color() and mdc-text-field-trailing-icon-color().

• switch: Added setNativeControlAttr method in mdc-switch adapter.

• checkbox: remove event listener for 'change' and add event listener for 'click'.

• Add handleClick() method in foundation to handle click event.
• Add setCheck() method into component to change check status.

• switch: Switch DOM structure has changed. See switch README for details
• button: Variable $mdc-button-disabled-container-fill-color renamed to $mdc-button-disabled-container-color.
• Removed $edgeOptOut option from mdc-theme-prop() Sass mixin.
• chips: the handleInteraction and handleTrailingIconInteraction handlers have been removed from the MDCChipFoundation. The handleClick handler has been added to the MDCChipFoundation
• Adds new adapter methods to MDCLinearProgressAdapter.
• elevation: Functions moved into the _functions.scss file
• touchtarget: Renames mixin from mdc-touch-target-component => mdc-touch-target-margin
• grid-list: Per the deprecation notice for grid-list, this component has been removed from MDC-Web. Some of its functionalities are available in the MDC Image List package instead. It is recommended that you migrate to the mdc-image-list package to continue to receive new features and updates.